body, div, span, table, td, th, tr { margin: 0; padding: 0; padding: 0; }

body { font-family: "Bitstream Vera Sans","Verdana","Helvetica","Arial","sans"; font-size: 11px; margin: 1em;} 

#controls { margin: 2em; }
.fields { margin-bottom: 1em; }
input { margin: 0 2em 0 0.5em; }

.table-viewport { float: left; margin: 1em; width: 45%; height: 300px; border: 1px solid gray; overflow: auto; }
table { width: 95%; margin: 1em; border-collapse: collapse; }
tr { width: 100%; }
th { text-align: left; font-style: normal; padding: 0 0 0.5em 1em; }
td { text-align: left; width: auto; padding-left: 1em;}
td.gaz-tree-expander { padding-left: 0;}

.gaz-sort-handle { display: block; width: 9px; height: 14px; position: relative; top: -15px; left: -12px; }
.sort-none { background: url(img/sorted_none.gif) no-repeat; }
.sort-desc { background: url(img/sorted_desc.gif) no-repeat; }
.sort-asc  { background: url(img/sorted_asc.gif) no-repeat; }

/* right table */

#table2 span.gaz-tree-expander-closed { background: white url(img/expander_closed.png) no-repeat left center; }
#table2 span.gaz-tree-expander-opened { background: white url(img/expander_opened.png) no-repeat left center; }
#table2 span.gaz-tree-expander-empty  { background: white url(img/expander_empty.png) no-repeat left center; }
#table2 .gaz-tree-row-last span.gaz-tree-expander-closed { background: white url(img/expander_last_closed.png) no-repeat left center; }
#table2 .gaz-tree-row-last span.gaz-tree-expander-opened { background: white url(img/expander_last_opened.png) no-repeat left center; }
#table2 .gaz-tree-row-last span.gaz-tree-expander-empty  { background: white url(img/expander_last_empty.png) no-repeat left center; }

#table2 td.gaz-tree-expander { background: url(img/line.png) repeat 5px 0px; }

#table2 .gaz-tree-expander span { display: block; padding-left: 20px; cursor: pointer; height: 16px; }
#table2 .gaz-tree-level-0 span { margin-left:  0px; }
#table2 .gaz-tree-level-1 span { margin-left: 16px; }
#table2 .gaz-tree-level-2 span { margin-left: 32px; }
#table2 .gaz-tree-level-3 span { margin-left: 48px; }
#table2 .gaz-tree-level-4 span { margin-left: 64px; }
#table2 .gaz-tree-level-5 span { margin-left: 80px; }

#table2 .yellow { background: yellow; }

/* left table */

#table1 span.gaz-tree-expander-closed { background: url(img/arrow_right.png) no-repeat left center; }
#table1 span.gaz-tree-expander-opened { background: url(img/arrow_down.png) no-repeat left center; }    

#table1 .gaz-tree-expander span { display: block; padding-left: 20px; cursor: pointer; height: 16px; }
#table1 .gaz-tree-level-0 span { margin-left:   0px; }
#table1 .gaz-tree-level-1 span { margin-left:  20px; }
#table1 .gaz-tree-level-2 span { margin-left:  40px; }
#table1 .gaz-tree-level-3 span { margin-left:  60px; }
#table1 .gaz-tree-level-4 span { margin-left:  80px; }
#table1 .gaz-tree-level-5 span { margin-left: 100px; }

